<!--
 * @Author: your name
 * @Date: 2021-06-09 23:22:42
 * @LastEditTime: 2022-05-15 16:13:28
 * @LastEditors: Please set LastEditors
 * @Description: 计算高度测试
 * @FilePath: \lix-vue2-demos\src\views\demo\style\CalHeight.vue
-->

<template>
  <div class="gl-flex-column" style="height: 100%">
    <div class="box-border" style="height: 300px">upper</div>
    <div ref="last" class="last-height box-border">
      bottom 使用 flex-grow，高度填充剩余空间
    </div>
  </div>
</template>

<script>
export default {
  name: 'ex-height',
  data() {
    return {}
  },
  mounted() {
    console.log('last-height', this.$refs.last.clientHeight)
  }
}
</script>

<style lang="less" scoped>
.last-height {
  flex-grow: 1;
}

.box-border {
  border: 1px solid black;
}
</style>
